.margin{width: 1200px; margin: 0 auto;}
body{background: #f6f6f6;}
header{height: 38px; background: #f6f6f6;}
header .left{float: left; text-align:center;}
header .left li{float: left; font:12px/38px ""; color: #000; padding: 0 10px;}
header .left .welcome{display: none;}
header .left .welcome #logout{ color: red;}
header .left li:nth-child(1) a{color: red;}
header .right{ float: right; text-align: center;}
header .right li{float: left; font:12px/38px ""; color: #000; background: url(../images/h1.png) no-repeat right center; padding: 0 10px;}
header .right li:nth-child(2) a{color: red;}
header .right li.active{background-image: none;}

nav{background: #fff; }
nav .top{display:flex;}
nav .top .logo{ margin: 24px 60px 15px 2px;}
nav .top .search{margin-top: 30px;}
nav .top .search .tet{ width:350px; height: 35px; padding-left:10px ; border:1px solid #ccc; border-right:0 ; border-radius:5px 0 0 5px;}
nav .top .search .btn{ width:40px; height: 37px; float: right; background: red; border: none; color: #fff;border-radius:0 5px 5px 0;}
nav .top .search p {display: flex;}
nav .top .search p a{display: block; margin: 3px 5px 0 0 ;} 
nav .top .search p a:hover{color: orange;}
nav .top .activity{ }
nav .top .activity ul{display: flex; text-align: center; margin: 30px 0 0 40px;}
nav .top .activity ul li{display: flex; background: url(../images/n3.png) no-repeat right center; padding: 0 10px; font: 14px/36px ""; margin: 0 5px;}
nav .top .activity ul li:last-child{background-image: none;}
nav .top .activity ul li img{width: 40px; height: 37px;}
nav .top .activity ul li span{ margin: 0 5px;}
nav .bottom ul{ display: flex;}
nav .bottom ul li a{display: block; font:300 18px/50px ""; padding: 0 10px; color: #000;}
nav .bottom ul li a:hover{background: #ff464e; color: #fff; border-radius: 5px 5px 0 0;}

#te{background:#ff464e; height: 3px;}

main{}
main .top{}
main .top ul{ display: flex;}
main .top ul li{ font: 15px/40px ""; margin: 0 20px;}
main .top ul li:nth-child(4) a{ color: #ff464e;}
main .top ul li:hover a{ color: #ff464e;}


main .center{ margin-bottom: 30px;}
main .center ul{  display: flex; flex-wrap:  wrap;}
main .center ul li{width: 220px; margin:15px 0 0 15px;}
main .center ul li a{}
main .center ul li a img{ width: 220px; height: 220px;}
main .center ul li a span{ font: 15px/40px ""; color: red; margin-left: 10px;}
main .center ul li a s{ font: 13px/40px ""; color:#ccc; margin-left: 10px;}
main .center ul li a p{ font-size: 12px; margin-left: 10px;}
main .center ul li a p em{ float: right; font-size: 12px; margin-left: 10px; margin-right: 10px;}
main  .bottom{ display: flex;align-items: center; justify-content:center; height: 80px; }
main  .bottom span{ width: 40px; height: 30px; background: #ff464e; color: #fff; border-radius: 5px; line-height: 30px; padding: 0 10px;}
main  .bottom ul{ display: flex;}
main  .bottom ul li{ border:1px solid #ccc; padding:10px; margin: 0 10px; border-radius: 5px;}



.divs {
    width: 1200px;
    margin: auto;
  }
  
  .tables {
    width: 1200px;
    border-collapse: collapse;
    margin: auto;
    font-size: 12px;
    color: #666666;
  }
  
  a {
    color: #666666;
  }
  
  .thr {
    background-color: #f3f3f3;
    color: #666666;
    font-size: 12px;
    height: 50px;
    border: 1px solid #cccccc;
  }
  
  [type="checkbox"] {
    vertical-align: middle;
  }
  
  .thr>th:nth-child(1) {
    width: 60px;
  }
  
  .thr>th:nth-child(2) {
    width: 120px;
  }
  
  .thr>th:nth-child(3) {
    width: 300px;
  }
  
  .thr>th:nth-child(4) {
    width: 180px;
  }
  
  .thr>th:nth-child(5) {
    width: 120px;
  }
  
  .thr>th:nth-child(6) {
    width: 180px;
  }
  
  .thr>th:nth-child(7) {
    width: 120px;
  }
  
  a {
    text-decoration: none;
  }
  
  tr {
    background-color: #fff4e8;
    border: 1px solid #cccccc;
  }
  
  html {
    background-color: #eeeeee;
  }
  .goodsCon {
    width: 290px;
    height: 400px;
    background-color: white;
    float: left;
    margin-left: 10px;
    margin-bottom: 10px;
    position: relative;
  }
  .icon {
    width: 200px;
    height: 200px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 30px;
    transition: all 0.3s;
  }
  .icon:hover {
    top: 20px;
  }
  .title {
    color: #333;
    font-size: 14px;
    margin: 20px -10px 9px;
    font-weight: 400;
    text-align: left;
    line-height: 20px;
    height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: absolute;
    left: 30px;
    top: 230px;
    width: 240px;
  }
  .info {
    position: absolute;
    top: 275px;
    left: 20px;
    color: #e01222;
    font-size: 14px;
  }
  .info > img {
    width: 40px;
    height: 19px;
    vertical-align: middle;
    margin-right: 10px;
  }
  .priceCon {
    width: 290px;
    height: 100px;
    position: absolute;
    border-top: 1px solid #eeeeee;
    top: 300px;
  }
  .history {
    position: absolute;
    left: 20px;
    top: 6px;
    padding: 0 8px;
    height: 16px;
    line-height: 16px;
    background-color: #e6e6e6;
    font-size: 10px;
    color: #999;
    -moz-border-radius: 2px;
    border-radius: 2px;
  }
  .price {
    font-size: 12px;
    color: #e01222;
    display: inline-block;
    margin-top: 25px;
    margin-left: 20px;
  }
  .price::first-letter {
    font-size: 14px;
  }
  .oldPrice {
    font-size: 12px;
    color: #999999;
    text-decoration: line-through;
    display: inline-block;
    margin-left: 6px;
  }
  .soldText {
    margin-left: 20px;
    font-size: 12px;
    color: #666666;
  }
  .soldSpan {
    width: 88px;
    height: 8px;
    display: inline-block;
    background-color: #e6e6e6;
    margin-left: 10px;
    border-radius: 4px;
  }
  .soldSpan > span {
    display: block;
    background-color: #e01222;
    height: 8px;
    border-radius: 4px;
  }
  .button {
    color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto 0;
    width: 80px;
    text-align: center;
    position: absolute;
    background: #df0021;
    text-decoration: none;
  }